<template>
  <div class="add-handout-container">
    <div class="flex-tree"><KnowledgeComponent @check-change="formGroup.chapterId = $event; request()" /></div>
    <div class="flex-main">
      <el-skeleton :loading="loading">
        <div class="box" v-if="dataset.length">
          <div :class="['cell', { 'is__checked': checkData && checkData.id === data.id }]" 
            v-for="data in dataset" :key="data.id" 
            @click="checkData = data"
          >
            <div class="cover"><el-image :src="`${ filePathBase }${ data.imgPath }`" fit="cover"></el-image></div>
            <p>{{ data.fileName }}</p>
            <i class="el-icon-check" />
          </div>
        </div>
        <cus-empty v-else />

        <el-pagination
          v-model:current-page="formGroup.current"
          v-model:page-size="formGroup.size"
          :total="formGroup.total"
          @current-change="request()"
          hide-on-single-page
          layout="prev, pager, next"
        />
      </el-skeleton>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive } from 'vue'
import KnowledgeComponent from '@/views/database/components/knowledge.vue';
import $ from '$';
import { ElMessage } from 'element-plus';

export default {
  components: { KnowledgeComponent },
  setup() {
    let [ loading, setLoading ] = $.useState(false);

    let [ dataset, setDataset ] = $.useState([]);

    let [ checkData, setCheckData ] = $.useState(null);

    let formGroup = reactive({
      current: 1,
      size: 20,
      total: 0,
      type: 2,
      subject: $.storage.get('subject').code,
      order: 1,
      orderType: 0,
      chapterId: []
    })

    const request = async () => {
      setLoading(true);
      let res = await $.http.json('/admin/material/queryPage', formGroup);
      setDataset(res.json.records);
      formGroup.total = res.json.total;
      setLoading(false)
    }
    request();
    
    let filePathBase = import.meta.env.VITE_APP_BASE_URL;

    const save = (resolve, reject) => checkData.value ? resolve(checkData.value) : reject() || ElMessage.warning('请选择一项讲义！');

    return { formGroup, loading, dataset, request, filePathBase, checkData, setCheckData, save }
  }
}
</script>

<style lang="scss" scoped>
.add-handout-container {
  display: flex;
  height: 100%;
  & > div {
    height: 100%;
    overflow: auto;
  }
  .flex-tree {
    width: 260px;
    padding: 10px;
    border: solid 1px #eee;
    border-radius: 4px;
  }
  .flex-main {
    flex: 1 1 260px;
    margin-left: 20px;
    overflow: auto;
  }
}
.box {
  display: flex;
  flex-wrap: wrap;
  .cell {
    width: 140px;
    padding: 10px;
    margin: 0 10px 5px 0;
    border: solid 2px transparent;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    transition: all .25s;
    &.is__checked {
      border-color: #72b22a;
      .el-icon-check {
        display: block;
      }
    }
    &:hover {
      border-color: #72b22a;
    }
    .el-icon-check {
      display: none;
      color: #fff;
      position: absolute;
      top: 0;
      right: 0;
      &::before {
        margin: 2px 2px 0 0;
        font-size: 16px;
        position: relative;
        z-index: 1;
      }
      &::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border: solid 15px transparent;
        border-top-color: #72b22a;
        border-right-color: #72b22a;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    .cover {
      height: 104px;
      margin-bottom: 6px;
      background: #D8D8D8;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      :deep(.el-image) {
        width: 100%;
        height: 100%;
      }
    }
    & > p {
      text-align: center;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      i {
        color: #72b22a;
      }
    }
  }
}
</style>